<template>
	<view>
		<view class="pinjiaList" v-for="i in pinhjiaList" :key="i.id">
			<view class="top">
				<view class="" style="display: flex;align-items: center;">
					<view class="">
						<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 10rpx;" :src="i.avatar==''?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':i.avatar==null?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':i.avatar==undefined?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':i.avatar" mode=""></image>
					</view>
					<view class="">{{ i.nickname ==''?'微信用户':i.nickname ==null?'微信用户':i.nickname ==undefined?'微信用户':i.nickname =='*'?'微信用户':i.nickname}}</view>
				</view>
				<view class="">
					<van-rate readonly :value="i.product_score" allow-half void-icon="star" void-color="#eee" color="#f5ca48" size="15px" @change="onChange" />
					</view>
			</view>
			<view class="middle"><view class="">{{i.add_time}}</view></view>
			<view class="bottom"><view class="">{{i.comment}}</view></view>
			<view class="" style="display: flex;flex-wrap: wrap;">
				<image @click="imagePreview(index,i.pics)" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;margin: 10rpx;" v-for="item,index in i.pics" :key="item" :src="item.image" mode=""></image>
			</view>
		</view>
		<view class="" v-if="pinhjiaList.length == 0">
			<view class="" style="color: #ccc;text-align: center;margin-top: 30rpx;">暂无评价数据</view>
		</view>
	</view>
</template>

<script>
	import { getSubmitPingjia } from '@/api/api.js';
export default {
	data() {
		return {
			value: '',
			pinhjiaList:[],
			arr:[],
			page:1,
			limit:200
		};
	},
	onLoad(options) {
		uni.showLoading({})
		this.reatId = options.id
		this.getSubmitPingjia(this.reatId)
	},
	
	methods: {
		imagePreview(index,piclist) {
			console.log(piclist)
			piclist.forEach(item => {
				console.log(item);
				this.arr.push(item.image);
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},
		//获取评价
		getSubmitPingjia(id){
			let data =`productId=${id}&score=${0}&page=${this.page}&limit=${this.limit},`
			getSubmitPingjia(data).then(res=>{
				console.log('res',res)
				if(res.data.code == '200'){
					uni.hideLoading()
					this.pinhjiaList = res.data.data
				}else {
					uni.hideLoading()
				}
			})
		},
		onChange(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss">
.pinjiaList {
	padding: 20rpx;
	background-color: #f5f5f5;
	margin-bottom: 15rpx;
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}
	.middle {
		font-size: 24rpx;
		color: #ccc;
		padding: 10rpx 0 20rpx 0rpx;
	}
	.bottom {
		font-size: 28rpx;
	}
}
</style>



